<template>
  <div id="Merchant">
    <search-bar/>
    <vj-list :load-more="loadMore.bind(this)">
      <template #default="{item:{picture,address,cyrange,name,id}}">
        <section @click="$pushRoute({path:'merchant-info',query:{customId:id}})" class="c-merchant">
          <van-image fit="cover" class="c-merchant__img" :src="picture"/>
          <div class="c-merchant__wrap">
            <h3 class="c-merchant__title">{{ name }}</h3>
            <p class="c-merchant__desc">{{ address }}</p>
            <em>{{ cyrange }}</em>
          </div>
        </section>
      </template>
    </vj-list>
    <van-popup position="top" v-model="showPop">
      <div class="c-pop">
        <van-cell-group>
          <van-cell :class="{active:activeCity===t}" :key="k" v-for="(t,k) in cityList" :title="t"
                    @click="showPop=false,activeCity=t"/>
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import {freeze} from "@/utils/logic";
import {asyncSleep} from "vijay-util";
import VjList from "@/components/vj-list.vue";
import {requestByGet} from "@/utils/request";
import SearchBar from "@/components/search-bar.vue";

@Component({
  components: {SearchBar, VjList}
})
export default class Merchant extends Vue implements ComponentOptions<Vue> {
  name = "Merchant";
  showPop = false;

  async loadMore(pageNo, pageSize) {
    const {records} = await requestByGet(`/qqc/qqcSpaceentry/yhList`, {pageNo, pageSize});
    return records;
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#Merchant {
  padding-top: 55px;

  .c-search {
    z-index: 999999;
    @include absoluteFull(fixed);
    bottom: auto;
    box-shadow: 0 2px 3px #f4f4f4;

    &__btn {
      font-size: 14px;
      vertical-align: middle;
      padding: 0 16px 0 12px;
    }

    &__icon {
      vertical-align: middle;
      margin-left: 8px;
      margin-top: -2px;
    }
  }

  .c-pop {
    padding: 55px 0 6px;

    .active {
      color: #349e7e;
      font-weight: bold;
    }
  }

  .c-merchant {
    @include alignCenter;

    &__img {
      width: 100px;
      height: 70px;
      flex-shrink: 0;
    }

    &__wrap {
      margin: 12px;
      line-height: 1.6;
      font-size: 12px;
      color: $tip-clr;
    }

    &__title {
      color: $strong-clr;
      font-size: 16px;
      margin-bottom: 2px;
      @include t-overflow(2);
    }
  }
}
</style>
